<template>
  <view class="page">
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        示例 1：
        <text>movable-view 区域小于 movable-area</text>
      </view>
      <movable-area class="mareal">
        <movable-view class="mview1" :x="x" :y="y" direction="all" @change="onChange">
          示例1
        </movable-view>
      </movable-area>
      <button @click="moveMview" type="default">点击这里移动至(30px,30px)</button>
      <view class="uni-title uni-common-mt">
        示例 2：
        <text>movable-view 区域大于 movable-area</text>
      </view>
      <movable-area class="marea2">
        <movable-view class="max" direction="all">
          <image src="//vueshop.glbuys.com/uploadfiles/1484285334.jpg"></image>
        </movable-view>
      </movable-area>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        x: 0,
        y: 0
      };
    },
    onLoad() {
      this.tmpX = 0;
      this.tmpY = 0;
    },
    methods: {
      moveMview: function(e) {
        this.x = this.tmpX;
        this.y = this.tmpY;
        setTimeout(() => {
          this.x = 30;
          this.y = 30;
        }, 30)
      },
      onChange: function(e) {
        this.tmpX = e.detail.x;
        this.tmpY = e.detail.y;
      }
    }
  }
</script>

<style lang="scss">
  .page {
    width: 100%;
    height: 100vh;
  }

  .mareal {
    width: 100%;
    height: 600rpx;
    background-color: red;
  }

  .mview1 {
    width: 300rpx;
    height: 300rpx;
    background-color: #007aff;
  }

  .marea2 {
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto;
    overflow: hidden;
  }

  .marea2 .max {
    width: 600rpx;
    height: 600rpx;
    background-color: #FF0000;
  }

  .marea2 .max image {
    width: 100%;
    height: 100%;
  }
</style>